<template>
  <div class="configMenu">
    <h2 class="editPage">修改</h2>
    <a-card :bordered="true" type="inner" title="菜单管理" style="margin: 15px 0;">
      <a-form :form="form" class="form">
        <a-form-item
          label="类型"
          :labelCol="{xs: {span: 4}}"
          :wrapperCol="{xs: {span: 16}}"
          class="min-label"
        >
        <!-- <a-radio-group :options="options" v-model="postBody.type" @change="levelChange" /> -->
          <a-radio-group name="radioGroup" v-model="postBody.type">
            <a-radio value="0" :disabled="postBody.type !== '0'">目录</a-radio>
            <a-radio value="1" :disabled="postBody.type !== '1'">菜单</a-radio>
            <a-radio value="2" :disabled="postBody.type !== '2'">按钮</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :label="switchType(postBody.type)+'名称'"
          :labelCol="{xs: {span: 4}}"
          :wrapperCol="{xs: {span: 16}}"
          class="min-label"
        >
          <a-input
            placeholder="10个字及以内"
            v-decorator="['name', { rules: [{ required: true, message: '请输入菜单名称' }]}]"
            @change="nameChange"
            style="width: 100%"
          />
        </a-form-item>
        <!-- <a-form-item label="上级菜单" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" class="min-label">
          <a-input placeholder="10个字及以内" disabled v-decorator="['name', { initialValue: postBody.pname || postBody.name, rules: [{ required: true, message: '请输入活动名称' }]}]" @change="parentIdChange" style="width: 100%" />
        </a-form-item>-->
        <a-form-item
          label="上级菜单"
          :labelCol="{xs: {span: 4}}"
          :wrapperCol="{xs: {span: 16}}"
          v-show="postBody.type !== '0'"
          class="min-label"
        >
          <!-- <a-input placeholder="10个字及以内" disabled v-decorator="['name', { initialValue: postBody.pname || postBody.name, rules: [{ required: true, message: '请输入活动名称' }]}]" @change="parentIdChange" style="width: 100%" /> -->
          <!-- <a-tree-select
            style="width: 300px"
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            :treeData="pidList"
            placeholder="上级菜单"
            treeDefaultExpandAll
            v-decorator="['pname', { initialValue: String(postBody.pid || postBody.pname), rules: [{ required: true, message: '请选择上级菜单' }]}]"
            @change="parentIdChange"
          >
          </a-tree-select> -->
          <a-select placeholder="上级菜单" :allowClear="true" showSearch :filterOption="filterOption" @change="parentIdChange" class="suppierSearch" v-decorator="['pname', { rules: [{ required: true, message: '请选择上级菜单' }]}]">
              <a-select-option v-for="item of pidList" :key="item.id" :value="item.value">{{ item.title }}</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item
          label="菜单路径"
          :labelCol="{xs: {span: 4}}"
          :wrapperCol="{xs: {span: 16}}"
          v-if="postBody.type === '1'"
          class="min-label"
        >
          <a-input
            placeholder="10个字及以内"
            v-decorator="['path', { rules: [{ required: true, message: '请输入菜单路径' }]}]"
            @change="pathChange"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item
          label="别名"
          :labelCol="{xs: {span: 4}}"
          :wrapperCol="{xs: {span: 16}}"
          v-else
          class="min-label"
        >
          <a-input
            placeholder="10个字及以内"
            v-decorator="['path', { rules: [{ required: true, message: '请输入菜单路径' }]}]"
            @change="pathChange"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item
          label="排序号"
          :labelCol="{xs: {span: 4}}"
          :wrapperCol="{xs: {span: 16}}"
          class="min-label"
        >
          <a-input
            placeholder="10个字及以内"
            v-decorator="['sort', { rules: [{ required: true, message: '请输入排序号' },{validator: validatNumber}]}]"
            @change="sortChange"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item
          label="图标"
          :labelCol="{xs: {span: 4}}"
          :wrapperCol="{xs: {span: 16}}"
          v-if="postBody.type === '0'"
          class="min-label"
        >
          <a-input
            placeholder="10个字及以内"
            read-only
            v-decorator="['icon', { initialValue: postBody.icon, rules: [{ required: true, message: '请选择图标' }]}]"
            @click="iconChange"
            style="width: 100%"
          >
            <a-icon slot="prefix" :type="postBody.icon" />
          </a-input>
        </a-form-item>
        <a-form-item label="是否缓存" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" v-if="postBody.type === '1'" class="min-label">
        <a-radio-group buttonStyle="solid" v-model="postBody.keepAlive">
          <a-radio-button v-for="(item, index) in keepAliveList" :key="index" :value="item.value">{{ item.label }}</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否显示" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" v-if="postBody.type === '1'" class="min-label">
        <a-radio-group buttonStyle="solid" v-model="postBody.isHidden">
          <a-radio-button v-for="(item, index) in isHiddenList" :key="index" :value="item.value">{{ item.label }}</a-radio-button>
        </a-radio-group>
      </a-form-item>
        <!-- <a-form-item label="活动名称: " :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" @click="" class="min-label">
          <a-input placeholder="10个字及以内" v-decorator="['name', { initialValue: postBody.name, rules: [{ required: true, message: '请输入活动名称' }]}]" @change="toName" style="width: 100%" />
        </a-form-item>
        <a-form-item label="活动名称: " :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" class="min-label">
          <a-input placeholder="10个字及以内" v-decorator="['name', { initialValue: postBody.name, rules: [{ required: true, message: '请输入活动名称' }]}]" @change="toName" style="width: 100%" />
        </a-form-item>-->
        <a-form-item :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" class="min-label">
          <a-button type="primary" class="marginBtn" :loading="loading" @click="editSubmit">确定</a-button>
          <a-button @click="$router.go(-1)" :loading="loading" class="marginBtn">返回</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <icon-selector
      v-model="currentSelectedIcon"
      @change="handleIconChange"
      @iconModalCancel="visible=false"
      :visible="visible"
    />
  </div>
</template>

<script>
import { preventMoreClick, switchType } from "../../utils/filter";
import * as API from "../../api/menu";
import IconSelector from "@/commonComponents/IconSelector";

export default {
  name: "menuEdit",
  components: {
    IconSelector
  },
  data() {
    return {
      form: this.$form.createForm(this),
      currentSelectedIcon: "pause-circle",
      visible: false,
      loading:false,
      options: [
        { label: '目录', value: '0' },
        { label: '菜单', value: '1' },
        { label: '按钮', value: '2' }
      ],
      keepAliveList: [
        {value: false, label: '否'},
        {value: true, label: '是'}
      ],
      isHiddenList: [
        {value: false, label: '否'},
        {value: true, label: '是'}
      ],
      postBody: {
        title: undefined,
        path: undefined,
        icon: undefined,
        menuSort: undefined,
        pid: undefined,
        alias: undefined,
        isHidden: true,
        keepAlive: false
      },
      pidList: []
    };
  },
  mounted() {
    this.getMenuDetialList()
  },
  activated() {
    this.getMenuDetialList();
    // this.getMenusList();
    // this.getParentList()
  },
  methods: {
    switchType,
    getMenuDetialList() {
      // 获取菜单信息
      let id = this.$route.query.id;
      API.getMenuDetial(id).then(res => {
        if (res.code === 200) {
          this.postBody = res.data;
          this.postBody.type = this.postBody.type+''
          console.log(res.data)
          this.form.setFieldsValue({
            name: res.data.title,
            pname: res.data.pid+'',
            path: res.data.path,
            sort: res.data.menuSort,
            // icon: res.data.icon
          })
          this.getParentList()
        }
      });
    },
    editSubmit() {
      console.log(11111)
      this.form.validateFields(err => {
        console.log(22222222, err)
        if (!err) {
          console.log(333333333)
          preventMoreClick(this, () => {
            console.log(4444444444)
            // 防重复点击
            this.loading = true
            let id = this.$route.query.id;
            this.postBody.alias = this.postBody.path;
            API.editMenu(id, this.postBody).then(res => {
              if (res.code === 200) {
                // this.postBody = res.data;
                this.$message.destroy();
                this.$message.success("操作成功");
                this.getMenusList();
              }else {
                this.loading = false
              }
            }).catch(()=> {
              this.loading = false
            })
          });
        }
      });
      
    },
    getMenusList() {
      // 更新菜单路由信息
      this.pidList = [];
      API.getMenus().then(res => {
        if (res.code === 200) {
          this.$store.dispatch("updateSup", res.data);
          this.$router.go(-1)
        }
        this.loading = false
      }).catch(()=> {
        this.loaidng = false
      })
    },
    getParentList () { // 上级菜单列表
    // console.log()
      this.pidList = []
      // let postBody = {
      //   type : this.postBody.type
      // }
      API.getParent(this.postBody.type-1)
        .then(res => {
          if (res.code === 200) {
            !!res.data.length && this.countMenu(res.data, this.pidList)
          }
        })
    },
    countMenu(list, pidList) {
      list.forEach(item => {
        let obj = {};
        obj.title = item.title;
        obj.value = String(item.id);
        obj.key = item.id;
        // if (item.children) {
        //   obj.children = []
        //   this.countMenu(item.children, obj.children);
        // }
        pidList.push(obj);
      });
    },
    validatNumber (rule, value, callback) {
      const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
      if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
          callback()
        } else {
          callback('需填写数字类型')
        }
    },
    handleIconChange(icon) {
      this.postBody.icon = icon;
      this.visible = false;
      this.form.setFieldsValue({
        icon: icon
      })
    },
    nameChange(e) {
      this.postBody.title = e.target.value;
    },
    pathChange(e) {
      this.postBody.path = e.target.value;
    },
    iconChange() {
      // this.postBody.icon = e.target.value;
      this.visible = true;
      this.currentSelectedIcon = this.postBody.icon;
    },
    sortChange(e) {
      this.postBody.menuSort = e.target.value;
    },
    parentIdChange(value) {
      this.postBody.pid = value;
      this.getParentList()
    },
    filterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  }
};
</script>

